<template>
	<!-- 个人中心 -->
	<view class="mine">
		<!-- 页面头部 -->
		<view class="mine-header">
			<view class="left">
				<image class="img" :src="imgUrl" mode="widthFix"></image>
			</view>
			<view class="right">
				<view v-if="isLogined">
					<view class="user" style="font-size: 40rpx;">
						{{user}}
					</view>
					<view class="acc" style="color: #ccc">
						{{account}}
					</view>
					<view class="date" style="color: #666">
						注册时间 : {{datetime}}
					</view>
				</view>
				<view v-else>
					<navigator url="/pages/login/login" style="display: block; padding:30rpx 0rpx;">点击登录</navigator>
				</view>
			</view>
		</view>

		<!-- 列表选项 -->
		<view class="mine-list">
			<view class="ul">
				<navigator url="/pages/collect/collect">
					<view class="li">
						<text>我的收藏</text>
					</view>
				</navigator>
				<view class="li">
					<text>我的签到</text>
				</view>
				<view class="li">
					<text>编辑资料</text>
				</view>
				<navigator url="/pages/examlist/examlist">
					<view class="li">
						<text>我的考试</text>
					</view>
				</navigator>
				<view class="li">
					<text>联系我们</text>
				</view>
				<view class="li">
					<text>免责声明</text>
				</view>
				<view class="li">
					<text>清除缓存</text>
				</view>
				<view class="li" @click="logoutFn">
					<text>退出登录</text>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: "",
				datetime: "",
				isLogined: false,
				imgUrl: "https://mp-f4011f50-7780-4aca-b10a-2323b1bbdf66.cdn.bspapp.com/users/1@1x.png"
			};
		},
		methods: {
			// 获取用户信息
			getUserInfoFn() {
				let info = uni.getStorageSync("INFO")
				// console.log(info);
				if (info) {
					this.isLogined = true; // true 表示登录
					this.account = info.account;
					this.user = info.user;
					this.imgUrl = info.imgUrl;
					const date = new Date();
					date.setTime(info.createAt);
					let d = date.toLocaleDateString();
					let t = date.toLocaleTimeString();
					this.datetime = d + " " + t;
				}
			},
			// 退出 删除本地储存
			logoutFn() { //函数作用域1
				let that = this;
				uni.showModal({
					title: "提示",
					content: "您要退出登录吗",
					success() { //函数作用域2
						that.isLogined = false; //退出登录
						uni.removeStorageSync("INFO"); //  本地存储的用户信息
						that.user = ""
						that.imgUrl =
							"https://mp-f4011f50-7780-4aca-b10a-2323b1bbdf66.cdn.bspapp.com/users/i-mine.png"
						that.datetime = ""
						that.account = "";

					}
				})
			}
		},
		onLoad() {
			this.getUserInfoFn()
		},
		onShow() {
			this.getUserInfoFn()
		}
	}
</script>

<style lang="scss">
	@import "../../static/scss/variable.scss";

	.mine {
		padding: $padd;
	}

	.mine-list {
		margin-top: 20rpx;

		.ul {
			.li {
				padding: 24rpx 10rpx;
				border-bottom: 1px solid #f0f0f0;
				color: #333;
			}
		}
	}

	.mine-header {
		width: 100%;
		display: flex;
		margin-top: 20rpx;

		.left {
			width: 200rpx;
			height: 200rpx;
			background-color: #ccc;
			flex-shrink: 0;
			overflow: hidden;

			.img {
				width: 200rpx;
				height: 200rpx;
				background-color: #ccc;
			}
		}

		.right {
			margin-left: 20rpx;

			.date {
				margin-top: 12rpx;
				color: #666;
			}
		}
	}
</style>